<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯道聚城</title>
    <link rel="icon" href="./images/index/iconfav.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="./images/index/iconfav.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/cart.min.css">
    <!-- jq -->
    <script src="./js/jquery.js"></script>
    <!-- 回到顶部 -->
    <script src="./js/backTop.js"></script>
    <script src="./js/cart.js"></script>

</head>

<body>
    <!-- 头部开始 -->
    <header>
        <!-- 头部导航开始 -->
        <div class="h-nav">
            <nav class="main">
                <ul class="left-nav">
                    <li>
                        <i></i><a href="">手机版</a>|
                    </li>
                    <li><a href="">Q币充值</a></li>
                </ul>
                <ul class="right-nav">
                    <li>
                        <span>你还未登录,请<a href="">登录</a></span>|
                    </li>
                    <li><a href="">我的订单</a>|</li>
                    <li><a href="">个人中心</a>|</li>
                    <li><a href="">帮助中心</a>|</li>
                    <li>
                        <a href="">游戏导航</a>
                        <i></i>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- 头部导航结束 -->
        <!-- 搜索导航开始 -->
        <div class="searchNav">
            <div class="uplogoSearch main">
                <a href="./index.html">
                    <div class="djLogo"></div>
                </a>
                <div class="searchBox">
                    <input type="text" placeholder="输入道具进行搜索">
                    <a href=""></a>
                </div>
                <div class="lolLogo"></div>
            </div>
            <div class="downNavBox main">
                <ul>
                    <li><a href="JavaScript:void(0)">首页</a></li>
                    <li><a href="JavaScript:void(0)">商品列表</a></li>
                    <li><a href="JavaScript:void(0)">活动专区</a></li>
                    <li><a href="JavaScript:void(0)">限时折扣</a></li>
                    <li><a href="JavaScript:void(0)">聚豆乐园</a></li>
                    <li><a href="JavaScript:void(0)">周边商城</a></li>
                    <li><a href="JavaScript:void(0)">个人中心</a></li>
                </ul>
                <div class="nav-cart">
                    <a href="JavaScript:void(0)">
                        <i></i>
                        <span>购物车</span>
                        <s class="cartNum">(0)</s>
                    </a>
                </div>
            </div>
        </div>
        <!-- 搜索导航结束 -->


    </header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <section>
        <div class="sNav main">
            <div class="loca">
                <span>你现在的位置</span>>
                <a href="">购物车</a>>
            </div>
        </div>
        <div class="cartBox main">
            <div class="payment">
                <h3>收货角色信息</h3>
                <div class="selectment">
                    <span class="lable">选择游戏角色:</span>
                    <ul>
                        <li>
                            <select name="" id="">
                                <option value="">请选择大区</option>
                                <option value="1">艾欧尼亚 电信</option>
                                <option value="2">比尔吉沃特 网通</option>
                                <option value="3">祖安 电信</option>
                                <option value="4">诺克萨斯 电信</option>
                                <option value="5">德玛西亚 网通</option>
                            </select>
                            <select name="" id="">
                                <option value="">请选择角色</option>
                                <option value="1">勇敢牛马不怕困难</option>
                                <option value="">马牛逼的一天</option>
                            </select>
                        </li>
                    </ul>
                </div>
                <div class="cartlist">
                    <h2>商品信息</h2>
                    <div class="tableBox">
                        <table>
                            <thead>
                                <tr>
                                    <th><i id="all" class="icheck"></i>全选</th>
                                    <th>商品名称</th>
                                    <th>类型</th>
                                    <th>单价</th>
                                    <th>期限</th>
                                    <th>数量</th>
                                    <th>优惠</th>
                                    <th>小计</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- <tr>
                                    <th><i class="icheck"></i></th>
                                    <td style="text-align: left;" class="gname">
                                        <a href=""><img src="./images/list/img1_1.jpg" alt=""></a>
                                        <a href="">源计划天眼 韦鲁斯</a>
                                    </td>
                                    <td><span>皮肤</span></td>
                                    <td><span>79.00 Q币</span></td>
                                    <td><span>永久</span></td>
                                    <td class="add">
                                        <button class="cut">-</button>
                                        <input type="text" value="1" class="numb">
                                        <button class="plus">+</button>
                                    </td>
                                    <td><span>无优惠</span></td>
                                    <td><span>79.00 Q币</span></td>
                                    <td>
                                        <a href="JavaScript:void(0)">关注</a>
                                        &nbsp;&nbsp;
                                        <a href="JavaScript:void(0)">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th><i class="icheck"></i></th>
                                    <td style="text-align: left;" class="gname">
                                        <a href=""><img src="./images/list/img1_1.jpg" alt=""></a>
                                        <a href="">源计划天眼 韦鲁斯</a>
                                    </td>
                                    <td><span>皮肤</span></td>
                                    <td><span>79.00 Q币</span></td>
                                    <td><span>永久</span></td>
                                    <td class="add">
                                        <button class="cut">-</button>
                                        <input type="text" value="1" class="numb">
                                        <button class="plus">+</button>
                                    </td>
                                    <td><span>无优惠</span></td>
                                    <td><span>79.00 Q币</span></td>
                                    <td>
                                        <a href="JavaScript:void(0)">关注</a>
                                        &nbsp;&nbsp;
                                        <a href="JavaScript:void(0)">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th><i class="icheck"></i></th>
                                    <td style="text-align: left;" class="gname">
                                        <a href=""><img src="./images/list/img1_1.jpg" alt=""></a>
                                        <a href="">源计划天眼 韦鲁斯</a>
                                    </td>
                                    <td><span>皮肤</span></td>
                                    <td><span>79.00 Q币</span></td>
                                    <td><span>永久</span></td>
                                    <td class="add">
                                        <button class="cut">-</button>
                                        <input type="text" value="1" class="numb">
                                        <button class="plus">+</button>
                                    </td>
                                    <td><span>无优惠</span></td>
                                    <td><span>79.00 Q币</span></td>
                                    <td>
                                        <a href="JavaScript:void(0)">关注</a>
                                        &nbsp;&nbsp;
                                        <a href="JavaScript:void(0)">删除</a>
                                    </td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                    <div class="tolalBox">
                        <p>
                            <label for="">商品件数/最大件数</label>
                            (<span>1</span>/50)
                        </p>
                        <p>
                            共<span>1</span>个商品总价:
                            <span id="totalNum" style="font-size: 18px;color: #f74a4a;font-weight: bold;">79.00</span>
                            <span style="font-size: 14px;color: #f74a4a;">Q币</span>
                        </p>
                    </div>
                    <div class="yhInfo">
                        <h2>你的优惠信息</h2>
                        <div class="yhq">
                            <span>
                                你没有优惠券:<span>0</span>
                                <a href="">如何获得优惠券>></a>
                            </span>
                        </div>
                        <div class="cart_t1">
                            <span class="sp">
                                <span>英雄联盟周边商城火热上线</span>
                                <a href="">查看详情</a>
                            </span>
                            <div>
                                实付款:
                                <span class="QB">
                                    <span>0.00</span>Q币
                                </span>
                                <button>提交订单</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 内容结束 -->

    <!-- 底部开始 -->
    <footer>
        <div class="footBox main">
            <div class="upFoot">
                <dl>
                    <dt>
                        <i class="i1"></i>
                        <span>我是新手</span>
                    </dt>
                    <dd><a href="#">什么是道聚城</a></dd>
                    <dd><a href="#">如何购买</a></dd>
                    <dd><a href="#">如何赠送</a></dd>
                    <dd><a href="#">如何获取欢乐豆</a></dd>
                </dl>
                <dl>
                    <dt>
                        <i class="i2"></i>
                        <span>个人中心</span>
                    </dt>
                    <dd><a href="#">发货时间</a></dd>
                    <dd><a href="#">如何领取</a></dd>
                    <dd><a href="#">补发规则</a></dd>
                    <dd><a href="#">Vip价定义</a></dd>
                    <dd><a href="#">道具状态定义</a></dd>
                </dl>
                <dl>
                    <dt>
                        <i class="i3"></i>
                        <span>支付方式</span>
                    </dt>
                    <dd><a href="#">支付方式</a></dd>
                    <dd><a href="#">购物点支付</a></dd>
                    <dd><a href="#">如何充值</a></dd>
                </dl>
                <dl>
                    <dt>
                        <i class="i4"></i>
                        <span>腾讯在线服务</span>
                    </dt>

                    <dd><a href="#">腾讯官方在线客服</a></dd>
                    <dd><a href="#"><img src="./images/index/shangbiao.png" alt=""></a></dd>
                </dl>
                <ul class="footlist">
                    <li>
                        <a href=""><img src="./images/index/fterma.png" alt=""></a>
                        <span>掌上道聚城</span>
                    </li>
                    <li>
                        <a href=""><img src="./images/index/fterma.png" alt=""></a>
                        <span>道聚城公众号</span>
                    </li>
                </ul>
            </div>
            <div class="downFoot">
                <ul>
                    <li><a href="">腾讯互动娱乐</a>|</li>
                    <li><a href="">服务条款</a>|</li>
                    <li><a href="">腾讯游戏隐私保护指引</a>|</li>
                    <li><a href="">腾讯游戏儿童隐私保护指引</a>|</li>
                    <li><a href="">广告服务</a>|</li>
                    <li><a href="">腾讯游戏招聘</a>|</li>
                    <li><a href="">腾讯游戏客服</a>|</li>
                    <li><a href="">游戏地图</a>|</li>
                    <li><a href="">成长守护平台</a>|</li>
                    <li><a href="">商务合作</a>|</li>
                    <li><a href="">网站导航</a>|</li>
                </ul>
                <p>
                    COPYRIGHT © 1998 – 2020 TENCENT. ALL RIGHTS RESERVED.
                </p>
                <a href="#">腾讯公司 版权所有</a>
            </div>
        </div>
        <div class="backTop">
            <a href="JavaScript:void(0)" class="bTop">
                <i></i>
                <span>返回顶部</span>
            </a>
            <a href="" class="dTop">
                反馈
            </a>
        </div>
    </footer>
    <!-- 底部结束 -->
</body>

</html>